import React, { Component } from "react";
import { Tabs, Input } from "antd";
import { Link } from 'react-router-dom';

import Logo_1 from '../../images/login/logo_1.png'
import Logo_2 from '../../images/login/logo_2.png'
import Bg_1_mp4 from '../../images/login/bg.mp4'

import "./index.scss";

const TabPane = Tabs.TabPane;

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  componentDidMount() {
  }
  render() {
    return (
      <section className="page page-login">
        <div className='video-wrap'>
          <video className="video" loop="loop" autoPlay={true}>
            <source src={Bg_1_mp4} type="video/mp4" />
          </video>
        </div>
        <div className="page-login-top">
					<div className='inner'>
						<Link to='/home'><img src={Logo_1} alt="" /></Link>
						<span>|</span>
						<Link to='/home' className="back"> 返回首页</Link>
					</div>
        </div>
        <div className="login-mask">
          <div className="mask-contain">
            <div className="top">
							<img src={Logo_2} alt="" />
              <span className="top-text">账号登录</span>
            </div>
            <Tabs defaultActiveKey="1">
              <TabPane tab="监管机构" key="1">
                <Input placeholder="请输入你的账号" />
                <Input placeholder="请输入你的密码" />
                <a href='' className="forgot">忘记密码?</a>
                <a href='' className="button">登录</a>
								<div className="tip">特别说明</div>
                <div className="des">
                  如您是上海文创管理部门，信东方可以免费为您开通上海文化企业大数据平台的管理账号，帮您在政策制定、产业规划、功能区规划提供数据支撑。
                </div>
                <a className="contact">联系开通</a>
              </TabPane>
              <TabPane tab="文创企业" key="2">
                <Input placeholder="请输入你的账号" />
                <Input placeholder="请输入你的密码" />
                <a href='' className="forgot">忘记密码?</a>
                <a href='' className="button">登录</a>
								<div className="tip">特别说明</div>
                <div className="des">
                  如您是上海的文创企业，在信东方平台注册并认领企业后，您将获得园区入驻、加入协(商)会、扶持资金申报、对接投资机构等更优质的服务。
                </div>
                <a className="contact">认领企业</a>
              </TabPane>
              <TabPane tab="文创园区" key="3">
                <Input placeholder="请输入你的账号" />
                <Input placeholder="请输入你的密码" />
                <a href='' className="forgot">忘记密码?</a>
                <a href='' className="button">登录</a>
								<div className="tip">特别说明</div>
                <div className="des">
                  如您是上海的文创园区，在信东方平台注册并认领园区后，您将获得园区宣传、活动发布、平台辅助招商、了解协(商)会、为园区企业对接投资机构等更优质服务。
                </div>
                <a className="contact">认领园区</a>
              </TabPane>
              <TabPane tab="协(商)会" key="4">
                <Input placeholder="请输入你的账号" />
                <Input placeholder="请输入你的密码" />
                <a href='' className="forgot">忘记密码?</a>
                <a href='' className="button">登录</a>
								<div className="tip">特别说明</div>
                <div className="des">
                  如您是上海的协(商)会，在信东方平台注册并认领协(商)会后，您将获得协(商)会宣传、活动发布、会员招募、为会员企业与园区、投资机构等对接产业合作提供优质服务。
                </div>
                <a className="contact">认领协(商)会</a>
              </TabPane>
              <TabPane tab="投资机构" key="5">
                <Input placeholder="请输入你的账号" />
                <Input placeholder="请输入你的密码" />
                <a href='' className="forgot">忘记密码?</a>
                <a href='' className="button">登录</a>
								<div className="tip">特别说明</div>
                <div className="des">
                  如您投资范围涵盖文创类型，在信东方平台注册并认领投资机构后，您将获得投资机构宣传、活动发布、以及由项目方在线发送的BP项目信息。
                </div>
                <a className="contact">认领投资机构</a>
              </TabPane>
            </Tabs>
          </div>
        </div>
				<div className='login-footer'>Copyright &#169; 2006-2019</div>
      </section>
    );
  }
}
